<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册运动员</title>
    <script src="js/axios-0.21.0.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            margin-top: 100px;
            text-align: center;
            line-height: 160px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <span style="font-size:30px">运动员注册系统</span><span style="margin-left: 50px"> 首页</span>
        </el-header>
        <el-container>
            <el-aside width="400px"></el-aside>
            <el-main>
                <el-form ref="form" :model="admin" label-width="80px" :rules="rules" size="medium">
                    <el-form-item>
                        <span style="font-size: 30px;">运动员注册</span>
                    </el-form-item>
                    <el-form-item label="姓名" prop="athlete_name">
                        <el-input v-model="athletes.athletesName" type="text" placeholder="请输入运动员姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="athletes.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="password">
                        <el-input v-model="password1" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="年级" prop="grade">
                        <el-input v-model="athletes.grade" type="text" placeholder="请输入年级"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="athletes.sex">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="班级" prop="class">
                        <el-input v-model="athletes.classes" type="text" placeholder="请输入班级"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="class">
                        <el-input v-model="athletes.phone" type="number" placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="class">
                        <el-input v-model="athletes.email" type="text" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <!-- 其他表单项省略 -->
                    <el-form-item align="left">
                        <el-button type="primary" @click.prevent="register" size="mini">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-aside width="400px"></el-aside>
        </el-container>
    </el-container>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            /*admin:{},
            depts:[],*/
            rules:{
                athletesName:[
                    {required:true,message:"运动员姓名不能为空",trigger:"blur"}
                ],
                password:[
                    {required:true,message:"密码不能为空",trigger:"blur"}
                ],
                grade:[
                    {required:true,message:"年级不能为空",trigger:"blur"}
                ],
                gender:[
                    {required:true,message:"性别不能为空",trigger:"change"}
                ],
                classes:[
                    {required:true,message:"班级不能为空",trigger:"blur"}
                ],
                phone:[
                    {required:true,message:"电话不能为空",trigger:"blur"}
                ],
                email:[
                    {required:true,message:"邮箱不能为空",trigger:"blur"}
                ]
            },
            athletes: {
                athletesId: "",
                athletesName: "",
                password: "",
                grade: "",
                gender: "",
                classes: "",
                phone: "",
                email: "",
                sex: ""
            },
            password1: ''
        },
        methods: {
            register() {
                if (this.athletes.athletesName === '' || this.athletes.athletesName === null) {
                    alert("运动员名不能为空")
                    return;
                }
                if (this.athletes.password !== this.password1 || this.athletes.password === null) {
                    alert("两次输入的密码不一致")
                    return;
                }
                if (this.athletes.sex === '' || this.athletes.sex === null) {
                    alert("请选择性别")
                    return;
                }
                if (this.athletes.grade === '' || this.athletes.grade === null) {
                    alert("年级不能为空")
                    return;
                }
                if (this.athletes.classes === '' || this.athletes.classes === null) {
                    alert("班级不能为空")
                    return;
                }
                if (this.athletes.phone === '' || this.athletes.phone === null) {
                    alert("电话不能为空")
                    return;
                }
                if (this.athletes.email === '' || this.athletes.email === null) {
                    alert("邮箱不能为空")
                    return;
                }
                axios.post("/user/register", this.athletes).then(resp => {
                    if (resp.data.message = "success") {
                        alert("注册成功，请记住你的id：" + resp.data.id)
                        location.href = "login.html"

                    } else {
                        alert("用户id已存在，请换一个吧")
                    }
                })
            }
        },
        created() {
            let queryString = window.location.search;
            let urlParams = new URLSearchParams(queryString);
            this.role = urlParams.get('role');
        }

    })
</script>
</body>

</html>